<script setup>
import {reactive} from "vue";
import {axiosAllCars, axiosChangeCollect, axiosGetUserInfo} from "../../api";
import {getUserState} from "../../storage/storage";
import {useRouter} from "vue-router";

const storageGroup = reactive({
  userinfo: getUserState(),
  initUserInfo() {
    if (this.userinfo.loginState) {
      collectGroup.getCollectList(this.userinfo.account);
    }
  }
})

const routerGroup = reactive({
  router: useRouter(),
  linkItemInfo(id) {
    this.router.push({name: "carItem", query: {id: id}});
  }
})

const collectGroup = reactive({
  baseUrl: "http://118.178.254.102:1252",
  collectList: [],
  async getCollectList(account) {
    let result = await axiosGetUserInfo({account: account});
    if (result.status === 200) {
      this.collectList = result.data[0].collect.split('_');
      await waresGroup.getWares(this.collectList);
    }
  }
})

const waresGroup = reactive({
  currentWares: [],
  wares: [],
  async getWares(collectList) {
    this.wares = [];
    let result = await axiosAllCars();
    if (result.status === 200) {
      this.wares = result.data;
      this.wares.forEach((item) => {
        collectList.forEach((name) => {
          if (item.name === name) {
            this.currentWares.push(item);
          }
        })
      })
    }
  },
})

storageGroup.initUserInfo()
</script>

<template>
  <div class="page-wrap">
    <div class="page-header">
      <div class="title">
        <p>我的收藏</p>
      </div>
    </div>
    <div class="page-body">
      <el-scrollbar height="400px">
        <div class="list">
          <div v-for="(item,index) of waresGroup.currentWares" :key="index" class="item"
               @click="routerGroup.linkItemInfo(item.id)">
            <div class="item-img">
              <img :src="collectGroup.baseUrl + item.img.split('_')[0]" alt="" height="75" width="120"/>
            </div>
            <div class="item-name">
              {{ item.type + item.name }}
            </div>
            <div class="item-info">
              {{ item.price }}
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<style scoped src="../../css/collect.css">

</style>
